<template>
    <div>
        <div class="game-list" v-for="(item,index) in normalizedApps" :key=index>
            <h3 v-if="item.moduleName" class="itemtitle">{{item.moduleName}}</h3>
            <div class="item" v-for="(game,index) in item.data" :key=index>
                <div @click="goGameDetail(game.id)">
                    <div class="icon">
                        <img v-lazy="game.icon" alt="">
                    </div>
                    <div class="item-content">
                        <h3>{{game.name}}</h3>
                        <div class="star">
                            <div class="star-wrapper">
                                <span class="star-icon" :style="{ width: game.star*20+'%' }"></span>
                            </div>
                            <p class="score">{{game.size}}MB</p>
                            <div class="type">
                                <span class="game-desc" v-for="(type,index) in game.tagNames" :key=index>{{type}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="downbtn " @click="goGameDetail(game.id)">详情</button>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    props: {
        apps: {
            type: Array,
        },
    },
    data() {
        return {
            commentAddress: '/index/gamedetail',
        };
    },
    computed: {
        normalizedApps() {
            let newApps = this.apps;
            // for (let i = 0; i < newApps.length; i++) {
            //     let item = newApps[i].data;
            //     for (let j = 0; j < item.length; j++) {
            //         let fimename = getFileName(getFileName(item[j].android));
            //         checkTaskIsExist(fimename, () => {
            //             this.$set(item[j], 'isfile', true);
            //         }, () => {
            //             this.$set(item[j], 'isfile', false);
            //         });
            //     }
            // }
            // console.log(newApps);
            return newApps;
        },
    },
    methods: {
        goGameDetail(id) {
            this.$router.push({
                path: `/index/gamedetail/${id}`,
                query: {
                    commentAddress: this.commentAddress,
                },
            });
        },
    },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

.game-list {
    width: 100%;
    margin-top: 16px;
    box-shadow: 0 2px 2px #d1d0d0;
    background: #ffffff;
    padding: 0 10px;
    box-sizing: border-box;

    h3 {
        padding: 15px 0;
        color: #222222;
        font-weight: bold;

        &.itemtitle {
            border-bottom: 1px solid #eeeeee;
        }
    }

    .item {
        display: block;
        height: 100px;
        padding-top: 1px;
        box-sizing: border-box;
        position: relative;
        text-decoration: none;
        border-bottom: 1px solid #eeeeee;

        .icon {
            height: 80px;
            position: absolute;
            left: 0;
            top: 9px;

            img {
                height: 100%;
            }
        }

        .item-content {
            margin-left: 100px;

            h3 {
                font-size: $font-size-large;
                margin: 0;
                color: #333333;
                padding: 10px 0 0 0;
            }

            .star {
                .star-wrapper {
                    width: 50px;
                    display: inline-block;
                    height: 10px;
                    position: relative;
                    overflow: hidden;

                    .star-icon {
                        position: absolute;
                        left: 0;
                        top: 0;
                        display: inline-block;
                        height: 10px;
                        background: url('./star.png');
                        background-size: 10px 10px;
                    }
                }

                .score {
                    font-size: $font-size-small;
                    padding: 3px 0;
                    color: $color-font;
                }
            }
        }

        .type {
            margin-top: 4px;

            .game-desc {
                box-sizing: border-box;
                width: 34px;
                height: 15px;
                border: 1px solid #febf01;
                border-radius: 5px;
                font-size: $font-size-small;
                color: #febf01;
                padding: 2px 4px;
                margin-right: 6px;
            }
        }

        .downbtn {
            position: absolute;
            right: 0;
            top: 30px;
            downloadbtn();

            &.opengame {
                background: #ffc400;
            }
        }
    }
}
</style>
